<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script src="js/vue.js"></script>
		<div id="app">
			<input type="button" value="走起来" @click='show()'></input>
			<input type="button" value="停下" @click='stop()'></input>
			<h4>{{msg}}</h4>
		</div>
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					msg:"zhe hsi hsn hap de man ",
					intervalId: null ,
				},
				methods:{
					show(){
						//定时器
						//截取msg的内容
						//放到msg末尾
						console.log(this.msg);
						
						//箭头函数内部的this 始终和外部的this 保持一致
						if(this.intervalId != null) return;
						this.intervalId = setInterval(() => {
							//拿头
							var start = this.msg.substring(0,1);
							//拿尾
							var end = this.msg.substring(1);
							//拼接新的
							this.msg = end + start;
						},200);
					
						
						
					},
					stop(){
						clearInterval(this.intervalId);
						//每次清除定时器之后 重新使定时器的值为null
						this.intervalId = null;
					}
				}
			})
		</script>
	</body>
</html>
